<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/template/template2.xhtml">

	<ui:define name="content1">
		<h:form id="form">
			<p:growl id="messages" showDetail="true" />
			<div class="container">

				<p:dataTable id="usersTable" value="#{userViewBean.houseUsers}"
					var="user" editable="#{userViewBean.loggedUser.userType =='Owner'}" editMode="cell">

					<p:ajax event="cellEdit" listener="#{userViewBean.updateUser}"
						update=":form:messages usersTable" />

					<p:column headerText="Name" style="width:20% !important">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{user.name}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{user.name}" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Username" style="width:20% !important">

						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{user.username}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{user.username}" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Usertype" style="width:20% !important">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{user.userType}" />
							</f:facet>
							<f:facet name="input">
								<p:selectOneMenu value="#{user.userType}" style="width:100%">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItem itemLabel="Owner" itemValue="Owner" />
									<f:selectItem itemLabel="User" itemValue="User" />
								</p:selectOneMenu>
							</f:facet>
						</p:cellEditor>
					</p:column>


					<p:column headerText="Delete" style="width:15% !important" rendered="#{userViewBean.loggedUser.userType == 'Owner' }">


						<h:commandButton id="gunoi" class="trashBtn"
							actionListener="#{userViewBean.removeUser}"
							onclick="if (! confirm('Are you sure you want to remove this user?') ) { return false;}; return true;"
							action="userView.xhtml">
							<f:attribute name="deleteId" value="#{user.userId}" />
						</h:commandButton>


					</p:column>

					<p:column headerText="Privilege" style="width:20% !important" rendered="#{userViewBean.loggedUser.userType == 'Owner' }">

						<h:commandButton id="img" class="editBtn"
							actionListener="#{userViewBean.toggleSelectedUser}"
							title="Privileges">
							<p:ajax update=":form" />
							<f:attribute name="userId" value="#{user.userId}" />
						</h:commandButton>
					</p:column>

				</p:dataTable>
			</div>
			<br />
			<div class="container">

				<p:panelGrid Styleclass="table" id="privGrid" columns="2"
					rendered="#{userViewBean.selectedPrivilege != null and userViewBean.loggedUser.userType == 'Owner' }" 
					style="margin-left:500px !important;margin-right:500px !important;">


					<h:outputText value="Lights" />
					<p:selectBooleanCheckbox
						value="#{userViewBean.selectedPrivilege.lights}">
						<p:ajax event="change"
							listener="#{userViewBean.updatePrivileges}" />
					</p:selectBooleanCheckbox>

					<h:outputText value="Room temperature" />
					<p:selectBooleanCheckbox
						value="#{userViewBean.selectedPrivilege.temp}">
						<p:ajax event="change"
							listener="#{userViewBean.updatePrivileges}" />
					</p:selectBooleanCheckbox>

					<h:outputText value="Room Electronics" />
					<p:selectBooleanCheckbox
						value="#{userViewBean.selectedPrivilege.roomEl}">
						<p:ajax event="change" listener="#{userViewBean.updatePrivileges}" />
					</p:selectBooleanCheckbox>

				</p:panelGrid>

			</div>
		</h:form>
	</ui:define>

</ui:composition>
